<template>
  <div id='height' class='table-page-search-wrapper'>
    <a-form layout='inline' @keyup.enter.native='onSubmit'>
      <a-row :gutter='18'>
        <a-col :xs='24' :sm='12' :md='14' :lg='16' :xl='18' :xxl='20' style='padding: 0'>
          <span v-for='(item,index) in config' :key='index'>
           <a-col v-if='index<=3' :xs='item.xs||24' :sm='item.sm||12' :md='6' :xl='6' :order='index'>
             <a-form-item
               :labelCol='labelCol'
               :wrapperCol='wrapperCol'
               :label="item.label||''"
               >
                <!--              输入框-->
                    <a-input v-if="item.type=='input'" :type="item.inputType||'text'"
                             :placeholder="item.placeholder||''" v-model='queryParam[item.name]' />
               <!--              省市区-->

                   <cn-area-linkage v-if="item.type=='area'" v-model='queryParam[item.name]' type='cascader'
                                    :province.sync='form.province'
                                    :city.sync='form.city' :area.sync='form.area' @change='handlePca' />

               <!--              字典下拉框-->
                   <cn-dict-select-tag v-if="item.type=='j-select'"
                                       :options="{value:'dictDataCode',label:'dictDataDesc'}"
                                       :dictCode='item.dictCode'
                                       v-model='queryParam[item.name]' :placeholder='item.placeholder' />
               <!--              自定义下拉框-->
                   <a-select v-if="item.type=='a-select'"
                             v-model='queryParam[item.name]'
                             :placeholder='item.placeholder'
                   >
                          <a-select-option v-for='(v,i) in item.option' :key='i' :value='v.value'>
                           {{ v.name }}
                          </a-select-option>
                     </a-select>
                     <a-radio-group v-if="item.type=='a-radio'"
                                    v-model='queryParam[item.name]'
                                    :placeholder='item.placeholder'>
                            <a-radio v-for='(v,i) in item.option' :key='i' :value='v.value'>
                              {{ v.name }}
                            </a-radio>
                     </a-radio-group>
               <!--              树形选择-->
                   <j-tree-select v-if="item.type=='tree-select'"
                                  v-model='queryParam[item.name]'
                                  :placeholder='item.placeholder'
                                  :data-type='item.dataType' />
               <!--              图片上传-->
                    <j-image-upload v-if="item.type=='upload'" class='avatar-uploader' :text='item.text'
                                    v-model='queryParam[item.name]'></j-image-upload>

                    <j-date v-if="item.type=='date'" :placeholder='item.placeholder'
                            :dateFormat="item.format?item.format:'YYYY-MM-DD'" v-model='queryParam[item.name]'
                            :showTime='item.showTime' style='width:100%'
                    />
                   <a-month-picker v-if="item.type=='date-month'"
                                   v-model='queryParam[item.name]'
                                   :format="item.format||'YYYY-MM'"
                                   :valueFormat="item.format||'YYYY-MM'"
                                   :placeholder='item.placeholder'
                                   style="width:100%"
                   />
                    <a-range-picker v-if="item.type=='date-range'" :placeholder='item.placeholder||[]'
                                    :format="item.format?item.format:'YYYY-MM-DD'"
                                    :valueFormat="item.format?item.format:'YYYY-MM-DD'" v-model='queryParam[item.name]'
                                    @change='(e)=>dateRangeChange(e,item.range)' />
                    <a-range-picker v-if="item.type=='date-range-one'" :placeholder='item.placeholder||[]'
                                    :format="item.format?item.format:'YYYY-MM-DD'"
                                    :valueFormat="item.format?item.format:'YYYY-MM-DD'" v-model='queryParam[item.name]'
                                    @change='(e)=>dateRangeChange1(e,item.range)' />
               <!--            :mode="mode2"-->
               <!--         时间-->
                <a-time-picker style='width: 100%'  v-if="item.type=='date-time'" :format="item.format?item.format:'HH:mm:ss'" :placeholder='item.placeholder||[]' :valueFormat="item.format?item.format:'HH:mm:ss'"
                                v-model='queryParam[item.name]' @change='(e)=>dateRangeChange1(e,item.range)'/>
          </a-form-item>
           </a-col>
           <a-col v-if='index>3&&toggleSearchStatus' :xs='item.xs||24' :sm='item.sm||12' :md='6' :xl='6' :order='index'>
             <a-form-item
               :labelCol='labelCol'
               :wrapperCol='wrapperCol'
               :label="item.label||''"
               >
                <!--              输入框-->
                    <a-input v-if="item.type=='input'" :type="item.inputType||'text'"
                             :placeholder="item.placeholder||''" v-model='queryParam[item.name]' />
               <!--              省市区-->

                   <cn-area-linkage v-if="item.type=='area'" v-model='queryParam[item.name]' type='cascader'
                                    :province.sync='form.province'
                                    :city.sync='form.city' :area.sync='form.area' @change='handlePca' />

               <!--              字典下拉框-->
                   <cn-dict-select-tag v-if="item.type=='j-select'"
                                       :options="{value:'dictDataCode',label:'dictDataDesc'}"
                                       :dictCode='item.dictCode'
                                       v-model='queryParam[item.name]' :placeholder='item.placeholder' />
               <!--              自定义下拉框-->
                   <a-select v-if="item.type=='a-select'"
                             v-model='queryParam[item.name]'
                             :placeholder='item.placeholder'
                   >
                          <a-select-option v-for='(v,i) in item.option' :key='i' :value='v.value'>
                           {{ v.name }}
                          </a-select-option>
                     </a-select>
                     <a-radio-group v-if="item.type=='a-radio'"
                                    v-model='queryParam[item.name]'
                                    :placeholder='item.placeholder'>
                            <a-radio v-for='(v,i) in item.option' :key='i' :value='v.value'>
                              {{ v.name }}
                            </a-radio>
                     </a-radio-group>
               <!--              树形选择-->
                   <j-tree-select v-if="item.type=='tree-select'"
                                  v-model='queryParam[item.name]'
                                  :placeholder='item.placeholder'
                                  :data-type='item.dataType' />
               <!--              图片上传-->
                    <j-image-upload v-if="item.type=='upload'" class='avatar-uploader' :text='item.text'
                                    v-model='queryParam[item.name]'></j-image-upload>

                    <j-date v-if="item.type=='date'" :placeholder='item.placeholder'
                            :dateFormat="item.format?item.format:'YYYY-MM-DD'" :showTime='item.showTime'
                            v-model='queryParam[item.name]' style='width:100%'
                    />

                     <a-month-picker v-if="item.type=='date-month'"
                                     v-model='queryParam[item.name]'
                                     :format="item.format||'YYYY-MM'"
                                     :valueFormat="item.format||'YYYY-MM'"
                                     :placeholder='item.placeholder'
                                      style="width:100%"
                     />

                     <a-range-picker v-if="item.type=='date-range'" :placeholder='item.placeholder||[]'
                                     :format="item.format?item.format:'YYYY-MM-DD'"
                                     :valueFormat="item.format?item.format:'YYYY-MM-DD'" v-model='queryParam[item.name]'
                                     @change='(e)=>dateRangeChange(e,item.range)'
                     />
                    <a-range-picker v-if="item.type=='date-range-one'" :placeholder='item.placeholder||[]'
                                    :format="item.format?item.format:'YYYY-MM-DD'"
                                    :valueFormat="item.format?item.format:'YYYY-MM-DD'" v-model='queryParam[item.name]'
                                    @change='(e)=>dateRangeChange1(e,item.range)'
                    />
               <!--            :mode="mode2"-->
               <!--         时间-->
                <a-time-picker  style='width: 100%'  v-if="item.type=='date-time'" :format="item.format?item.format:'HH:mm:ss'" :placeholder='item.placeholder||[]' :valueFormat="item.format?item.format:'HH:mm:ss'"
                                v-model='queryParam[item.name]' @change='(e)=>dateRangeChange1(e,item.range)'/>
             </a-form-item>
           </a-col>
         </span>
        </a-col>
        <a-col :xs='24' :sm='12' :md='10' :lg='8' :xl='6' :xxl='4' :order='5' style='padding: 0'>
          <span style='float: right;overflow: hidden;' class='table-page-search-submitButtons'>
            <a-button type='primary' @click='onSubmit' icon='search' style='margin-bottom: 8px'>查询</a-button>
            <a-button type='primary' @click='resetThisPage' icon='reload'
                      style='margin-left: 1px;margin-bottom: 8px'>重置</a-button>
            <span v-if='config.length>4'>
               <a @click='handleToggleSearch' style='margin-left: 4px'>
              {{ toggleSearchStatus ? '收起' : '展开' }}
              <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
            </a>
            </span>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import JTreeSelect from '@comp/cn-form/JTreeSelect'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import UploadImage from '@comp/upload-image/UploadImage'
import JImageUpload from '@comp/cn-form/JImageUpload'
import JDate from '@comp/cn-form/JDate'
import { pick } from 'lodash'

export default {
  name: 'popup-modal',
  // props: ['config','resetParams'],
  props: {
    config: {
      type: Array,
      default: []
    },
    resetParams: {
      type: Object,
      default: {}
    },
    searchOn:{
      type:Boolean,
      default:{}
    },
    queryParam: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      toggleSearchStatus: false,
      form: this.$form.createForm(this)
      // queryParam:{}
    }
  },
  components: { JTreeSelect, JAreaLinkage, UploadImage, JImageUpload, JDate },
  created() {
    if (this.resetParams) {
      this.queryParam = JSON.parse(JSON.stringify(this.resetParams))
    } else {
      this.queryParam = {}
    }
  },
  watch: {},
  methods: {
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
      this.$nextTick(() => {
        this.$emit('getHeight', document.getElementById('height').clientHeight)
      })

    },
    onSubmit() {
      this.$emit('search', this.queryParam)
    },
    resetThisPage() {
      if (this.resetParams) {
        this.queryParam = JSON.parse(JSON.stringify(this.resetParams))
      }else {
        this.queryParam = {}
      }
      this.$emit('search', this.queryParam, 'reset')
    },
    dateRangeChange(date, name) {
      if (!date) {
        this.queryParam[name[0]] = ''
        this.queryParam[name[1]] = ''
        return
      }
      this.queryParam[name[0]] = date[0]
      this.queryParam[name[1]] = date[1]
    },
    dateRangeChange1(date, name) {
      if (!date) {
        this.queryParam[name] = ''
        return
      }
      this.queryParam[name] = date + ''
    }
  }
}
</script>

<style scoped lang='less'>
@import '~@assets/less/common.less';

.gonghuoxinxi {
  width: 100%;
  border-bottom: 1px dashed black;
  margin: 10px 0;
  padding: 15px 5px;
  display: flex;
  flex-direction: column;
}

/deep/ .table-page-search-submitButtons {
  display: block;
  margin-bottom: 0px !important;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .ant-col-md-5 {
    width: 20%;
  }
}


///deep/.ant-col-xl-5 {
//  width: 20%;
//}
</style>
